<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreeGrid performance presentation</title>

<style type="text/css">
@import "script/dojo-1.4.3/dojo/resources/dojo.css";
@import "script/dojo-1.4.3/dijit/themes/tundra/tundra.css";

@import "script/dojo-1.4.3/dojox/layout/resources/FloatingPane.css";
@import "script/dojo-1.4.3/dojox/layout/resources/ResizeHandle.css";

@import "script/dojo-1.4.3/dojox/grid/resources/Grid.css";
@import "script/dojo-1.4.3/dojox/grid/resources/tundraGrid.css";
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"]
};
</script>
<script type="text/javascript" src="script/dojo-1.4.3/dojo/dojo.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.DropDownButton");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.NumberSpinner");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.SimpleTextarea");
    dojo.require("dijit.form.Textarea");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.Menu");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.TooltipDialog");

    dojo.require("dojox.html.entities");
    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");
    dojo.require("dojox.widget.Standby");

    dojo.require("dojox.widget.DataPresentation");
</script>
<script type="text/javascript" src="script/utils.js"></script>
<script type="text/javascript">
function debug(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    demo.utils.show(id);
}

function hide(id) {
    demo.utils.hide(id);
}
</script>
<style type="text/css">
@import "css/rounded-button.css";
@import "css/rounded-corners.css";

body {
    padding: 10px;
}

.dojoxLegendNode {
    border: 1px solid #CCCCCC;
    margin: 5px auto;
    padding: 2px;
}

.smallTextCentered {
    font-size: x-small;
    text-align: center;
}

.confidential {
    color: #AA0000;
    font-weight:  bold;
}

</style>
<script type="text/javascript">
var GlobalVariables = {
    "contextURL": null,
    "identifier": "moniker",
    "dp": null
};

demo.presentation = {};

demo.presentation.CONTRASTING2 = [
  "#FFBF1F", // light orange
  "#CC6600"  // dark orange
];

demo.presentation.CONTRASTING3 = [
  "#FFBF1F", // light orange
  "#FF9900", // orange
  "#CC6600"  // dark orange
];

// Strong contrasting colours
demo.presentation.CONTRASTING_STRONG_COLOURS = [
  "#e31a1c", // red
  "#377db8", // blue
  "#4daf4a", // green
  "#984ea3", // purple
  "#ff7f00", // orange
  "#ffff33", // yellow
  "#a65628", // brown
  "#f781bf", // pink
  "#999999"  // gray
];

// Medium contrasting colours
demo.presentation.CONTRASTING_MEDIUM_COLOURS = [
  "#ef6664",
  "#74a4cd",
  "#8ccd87",
  "#bb8cc3",
  "#feb452",
  "#ffff7f",
  "#c59672",
  "#faadd5",
  "#c5c5c5"
];

// Softer contrasting colours
demo.presentation.CONTRASTING_SOFT_COLOURS = [
  "#fbb3ad",
  "#b2cce2",
  "#ccebc5",
  "#decbe4",
  "#fee9a5",
  "#ffffcc",
  "#e4d7bc",
  "#fddaec",
  "#f2f2f2"
];

demo.presentation.getMappedValue = function(value, mapping) {
    var key = value + "";
    var mappedValue = mapping[key];
    return (mappedValue === undefined) ? value : mappedValue;
};

/**
 * Used to display null values as zeros in grid
 */
demo.presentation.formatNullToZero = function(value, rowIndex) {
    var mapping = {
        "null": 0
    };

    var mappedValue = demo.presentation.getMappedValue(value, mapping);
    return mappedValue;
};

/**
 * Used to display time and right align in grid.
 * @param {Object} value
 * @param {Object} rowIndex
 */
demo.presentation.formatTime = function(value, rowIndex) {
    this.customStyles.push("text-align: right");
    return (value / 1000) + "s";
};

/**
 * Used to display readable time in grid.
 * @param {Object} value
 * @param {Object} rowIndex
 */
demo.presentation.formatReadableTime = function(value, rowIndex) {
    var sec = Math.floor(value / 1000);
    if (sec < 1) {
        return (value / 1000) + "s";
    }

    var min = Math.floor(sec / 60);
    if (min < 1) {
        return sec + "s";
    }

    var secPart = sec - min * 60;
    return min + "m" + secPart  + "s";
};

function refreshDP() {
    var dp = GlobalVariables.dp;
    if (dp) {
        dp.refresh();
        if (dp.chartWidget) {
            refreshChart(dp.chartWidget);
        }
    }
}

function refreshChart(chart) {
    if (!chart) {
        return;
    }
    dojo.style("chart_div", "width", "100%");
    chart.resize();
    setAxisMinValue(chart, 0);
}

// set axis min value.
function setAxisMinValue(chart, minValue) {
    if (!chart) {
        return;
    }

    var min = Math.floor(minValue);
    var axisNames = ["primary", "secondary"];

    dojo.forEach(axisNames, function(axisName) {
        var axis = chart.getAxis("dependent-" + axisName);
        dojo.mixin(axis.opt, {min: min});
    });

    chart._makeDirty();
    chart.render();
}

function calcChartHeight(chartType, data) {
    var chartHeight = 300;

    if (chartType.search("Bar") > -1) {
        chartHeight = 20 * (data.range.length - 5) + 200;
    }

    return chartHeight;
}

function getChart(domNode) {
    var params = {
        animate: true,
        type: "chart"
    };

    var data = makeData();
    params.data = data;

    var chartType = makeChartType(data);
    params.chartType = chartType;

    var chartHeight = calcChartHeight(chartType, data);
    dojo.style(domNode, "height", chartHeight + "px");

    // setup grid
    params.gridNode = "grid_div";

    // setup title
    params.titleNode = "title_div";

    // setup footer
    params.footerNode = "footer_div";

    // setup legend
    params.legendNode = "legend_div";
    params.legendVertical = false;

    // setup series
    var series = makeSeries(data);
    params.series = series;

    // setup reverse
    params.reverse = makeReverse(chartType);

    // setup theme
    var colors = makeChartColors(params.series);
    console.info("colors", colors);
    var theme = new dojox.charting.Theme({colors: colors});
    params.theme = theme;

    // metadata
    //var metadata = configuration.data.metadata.description;
    //formatMetadata(dojo.byId("metadata_div"), metadata);

    var dp = new dojox.widget.DataPresentation(domNode, params);

    // set axis min value to 0.
    var chart = dp.chartWidget;
    if (chart) {
        refreshChart(chart);
    }

    return dp;
}

function makeData() {
    var data = {};

    data.title = "TreeGrid performance comparison";

    var range = ["ItemFileReadStore", "QueryReadStore"];
    data.range = range;

    var fileStoreData = {
        "load": 1450,
        "render": 12653
    };
    var queryStoreData = {
        "load": 137,
        "render": 369
    };

    var summaryData = {
        "fileStoreData": fileStoreData["load"] + fileStoreData["render"],
        "queryStoreData": queryStoreData["load"] + queryStoreData["render"]
    };

    data.series = [];

    var loadData = {
        legend: "Server Data Load Time",
        values: []
    };
    loadData.values.push(fileStoreData["load"]);
    loadData.values.push(queryStoreData["load"]);
    data.series.push(loadData);

    var renderData = {
        legend: "Grid Rendering Speed",
        values: []
    };
    renderData.values.push(fileStoreData["render"]);
    renderData.values.push(queryStoreData["render"]);
    data.series.push(renderData);

    var totalData = {
        legend: "Total",
        values:  []
    };
    totalData.values.push(summaryData["fileStoreData"]);
    totalData.values.push(summaryData["queryStoreData"]);
    data.series.push(totalData);

    return data;
}

function makeChartType(data) {
    //var chartType = "ClusteredBars";
    var chartType = "StackedBars";
    return chartType;
}

function makeSeries(data) {
    var series  = [];
    dojo.forEach(data.series, function(seriesItem, index) {
        var datapoints = "series[" + index + "].values";
        var namefield = "series[" + index + "].legend";
        var newSeries = {
            datapoints: datapoints,
            namefield: namefield,
            gridformatter: demo.presentation.formatTime,
            gridstyles: "text-align: right;"
        };

        // don't show total column in chart
        if (seriesItem.legend.search(/total/i) > -1) {
            newSeries.chart = false;
        }
        series.push(newSeries);
    });

    // add range series to first
    var rangeName = "Used data store";
    var rangeSeries = {datapoints: "range", name: rangeName, type: "range", chart: false};
    series.unshift(rangeSeries);

    console.debug("series", series);
    return series;
}

function makeReverse(chartType) {
    var reverse  = false;
    if (chartType.search(/bar/i) > -1) {
        reverse = true;
    }

    return reverse;
}

function makeChartColors(series) {
    var colors = dojo.clone(demo.presentation.CONTRASTING2);
    return colors;
}

/**
 * Format metadata description items node = div node to contain formatted
 * metadata metadata = list of metadata description items array
 */
function formatMetadata(node, metadata) {
    // clear old metadata content
    dojo.empty(node);

    var description = dojo.create("table", { "align" : "center" });
    var tbody = dojo.create("tbody", null, description); 

    dojo.forEach(metadata, function(item) {
        if (item.name) {
            var tr = dojo.create("tr", null, tbody); 
            var td = dojo.create("td", { align: "right", innerHTML: item.name }, tr);
            dojo.addClass(td, "dojoxLegendText");
            var td2 = dojo.create("td", { innerHTML: ":" }, tr);
            dojo.addClass(td2, "dojoxLegendText");
            var td3 = dojo.create("td", { innerHTML: item.value }, tr);
            dojo.addClass(td3, "dojoxLegendText");
        }
    });

    node.appendChild(description);
}

dojo.addOnLoad(function() {
    debug("loaded");

    var dp = GlobalVariables.dp;
    if (dp) {
        dp.destroy();
    }

    GlobalVariables.dp = getChart("chart_div");
    console.debug("dp", GlobalVariables.dp);

    dojo.connect(dijit.byId("spinner"), "onChange", function(value) {
        var width = Math.floor(value);

        dojo.style("datapresentation", "width", width + "px");
        refreshDP();
    });
});
</script>
</head>
<body class="tundra">

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
          <div id="datapresentation" style="width: 100%;">
            <!-- title -->
            <div style="text-align: center;">
              <h2 id="title_div" style="margin-bottom: 0;"></h2>
            </div>

            <!-- chart -->
            <div id="chart_div"></div>

            <!-- legend -->
            <div id="legend_div"></div>

            <!-- grid -->
            <div id="grid_div"></div>

            <!-- metadata -->
            <div id="metadata_div"></div>

            <!-- footer -->
            <div style="text-align: center;">
              <div id="footer_div" class="smallTextCentered confidential"></div>
            </div>
          </div>
        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

    <!-- Button Panel -->
    <div dojoType="dojo.dnd.Moveable">
      <div id="buttonPanel" dojoType="dijit.TitlePane" title="Button Panel" style="">
        <select id="selector" dojoType="dijit.form.FilteringSelect">
            <option value="cre_t">Call response time met trend</option>
            <option value="xot_t">OneTeam Scorecard</option>
        </select>
        <input id="spinner" dojoType="dijit.form.NumberSpinner" name="minval" value="1000" smallDelta="100" constraints="{min:0,max:10000,places:0}" intermediateChanges="true" />
        <div dojoType="dijit.form.Button" onClick="refreshDP();">Refresh</div>
      </div>
    </div>
  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; bottom: 20px; right: 20px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>
</body>
</html>
